<template>
    <div>
        <div class="x-content" v-for="(v,index) in listData" :key="index">
            <!-- 标题部分 -->
            <div class="x-content-top padding25 x-bottom-border" v-if="showTitle">
                <text class="x-flex1 x-title">老裁缝家纺</text>
                <text class="x-type-text">{{getType(v.type)}}</text>
            </div> 
            <!-- 商品部分 -->
            <div :class="[showDetail?'x-order-detail':'']">
                <div class="x-content-center padding25 x-bottom-border" 
                     v-for="(shop,i) in v.skus" 
                     :key="i"
                     @click="showDetailClick(v)">
                    <image class="x-image" :src="imgurl"></image>
                    <div class="x-shop-div">
                        <div class="x-shop-start">
                            <text class="x-shop-title">{{shop.sku_name}}</text>
                            <text class="x-shop-explain">{{getExplain(shop.sku_specs)}}</text>
                        </div>
                        <div class="x-shop-last">
                            <text class="x-shop-price padding-bottom5">¥{{shop.sku_price}}</text>
                            <text class="x-shop-num">×{{shop.number}}</text>
                        </div>
                    </div>
                </div>
            </div>
            <slot name="page"></slot>
            <!-- 商品合计 -->
            <div class="x-content-bottom padding25 x-bottom-border">
                <text class="x-flex1 x-shop-ntext">共计{{getShopNum(v.skus)}}件商品</text>
                <text class="x-shop-ntext">合计：</text>
                <text class="x-shop-price">¥{{(v.coin).toFixed(2)}}</text>
            </div> 
            <!-- 按钮组 -->
            <div class="x-content-button padding25" v-if="showBottom">
                <!-- 已发货 -->
                <text class="x-button-two" v-if="v.type=='yfh'">查看物流</text>
                <text class="x-button-two" v-if="v.type=='yfh'">延长收货</text>
                <text class="x-button-one" v-if="v.type=='yfh'">确认收货</text>
                <!-- 已完成 -->
                <text class="x-button-two" v-if="v.type=='cg'">删除订单</text>
                <!-- 待发货 -->
                <text class="x-button-one" v-if="v.type=='yfk'">提醒发货</text>
                <!-- 待付款 -->
                <text class="x-button-one" v-if="v.type=='dfk'">付款</text>
                <!-- 待选择门店地址 -->
                <text class="x-button-one" v-if="v.type=='dxz'">选择门店地址</text>
            </div> 
        </div>
    </div>
</template>
<script>
import asCore from "../../../../common/js/core";
export default {
    props: {
      listData: {
        type: Array,
        default: () => ([])
      },
      showDetail:{
          type:Boolean,
          default:false
      },
      showTitle:{
          type:Boolean,
          default:true
      },
      showBottom:{
          type:Boolean,
          default:true
      }
    },
    data(){
        return {
            imgurl:asCore.localpath + 'img/order/order.png'
        }
    },
    methods:{
        /* 获取商品数量 */
        getShopNum(shopData){
            if(!shopData) return;
            var num = 0;
            for(var i=0;i<shopData.length;i++){
                num+=shopData[i].number;
            }
            return num;
        },
        /* 获取商品总价 */
        getShopPrice(shopData){
            if(!shopData) return;
            var price = 0.00;
            for(var i=0;i<shopData.length;i++){
                price+=shopData[i].sku_price;
            }
            return price.toFixed(2);
        },
        showDetailClick(shopData){
            if(!shopData) return;
            this.$emit('showDetailClick', shopData);
        },
        shopDetailClick(shopData){
            this.$emit('shopDetailClick', shopData);
        },
        /**获取订单状态 */
        getType(type){
            return "";
        },
        /**获取订单规格 */
        getExplain(data){
            if(!data) return;
            var explain = "";
            for(var i in data){
                explain += data[i]['name'] + ":" + data[i]['value'] + " ";
            }
            return explain;
        }
    }
}
</script>
<style scoped>
.iconfont{
    font-family: iconfont;
}
.x-flex1{
    flex: 1;
}
.x-content {
    background-color: #fff;
    margin-bottom:20px;
}
.padding25{
    padding-left: 25px;
    padding-right: 25px;
}
.x-bottom-border {
    border-bottom-color: #dfdfdf;
    border-bottom-width: 1px;
}
.padding-bottom5 {
    padding-bottom: 5px;
}
.x-content-top {
    height:95px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.x-content-center {
    flex-direction: row;
    padding-top:20px;
    padding-bottom: 20px;
}
.x-title {
    color: #151517;
    font-size:32px;
}
.x-type-text {
    color: #af0a28;
    font-size: 30px;
}
.x-image {
    height: 150px;
    width: 150px;
}
.x-shop-div {
    flex: 1;
    position: relative;
    height: 150px;
}
.x-shop-start {
    padding-left: 15px;
}
.x-shop-last {
    flex: 1;
    position: absolute;
    bottom: 0px;
    padding-left: 15px;
    flex-direction: row;
}
.x-shop-title {
    color: #151517;
    font-size:30px;
}
.x-shop-explain {
    color: #696969;
    font-size:24px;
    padding-top:5px;
}
.x-shop-price {
    color: #af0a28;
    font-size: 32px;
}
.x-shop-num {
    padding-left:50px;
    color: #68686a;
    font-size:26px;
    padding-top:5px;
}
.x-content-bottom {
    height:95px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.x-shop-ntext {
    color: #222126;
    font-size:28px;
}
.x-content-button {
    height:95px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
}
.x-button-one {
    color: #ae0a2c;
    height:60px;
    line-height: 60px;
    text-align: center;
    font-size:28px;
    padding-left:28px;
    padding-right: 28px;
    border-color: #ae0a2c;
    border-width: 1px;
    border-radius: 50px;
    margin-left:20px;
}
.x-button-two {
    color: #232325;
    height:60px;
    line-height: 60px;
    text-align: center;
    font-size:28px;
    padding-left:28px;
    padding-right: 28px;
    border-color: #b7b6bc;
    border-width: 1px;
    border-radius: 50px;
    margin-left:20px;
}
.x-button-one:active {
    background-color: #ae0a2c;
    color: #fff;
}
.x-button-two:active {
    background-color: #ae0a2c;
    color: #fff;
}
.x-order-detail:active {
    background-color: #eee;
}
</style>

